
<template>
     <div class="register-container">
      <el-card class="regitser-card">
        <h1 class="login-title">用户注册</h1>
        <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="80px" class="register-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            
              <el-button type="primary" class="register-button" @click="handleRegister">注册</el-button>
              <el-button type="info" class="register-button" @click="$router.push('/login')">返回</el-button>

          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
import router from '@/router';

export default {
    data() {

      return {
     
          form: {
            username: '',
            password: '',
           
               },
        rules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          
        },
        
      };
    },

    methods: {
  
      handleRegister(){
        this.$refs.form.validate(valid => {
          if (valid) {
            //由于后端是以@ResponseBody进行接收 传到后端去的数据用this.form 不能使用登录一样的格式 
            this.$http.post('/add',this.form).then(res=>{
                  console.log(res.data)
            })
            
          }

          else{
            console.log('error submit!!');
	           return false;
              }
            
        })
        
    }
        
      
    }
  };
  </script>
  
  <style>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器占据全屏高度 */
    background-color: #f0f0f0; /* 背景色，根据需要调整 */
  }

    .register-card {
      width: 450px; /* 设定卡片宽度 */
      border-radius: 10px; /* 圆角 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      overflow: hidden; /* 隐藏溢出内容 */
      background-color: #fff; /* 背景色 */
      padding: 20px; /* 内边距 */
    }
  .login-title {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 标题与表单项之间的间距 */
  }
  .login-form {
    margin-bottom: 20px; /* 表单底部间距 */
  }
  .register-button {
    
    width: 100px; /* 按钮宽度占满其父元素 */
    margin-top: 10px;
  }
  

  </style>
  
  
  